<template>
  <view class="waveform">
    <view class="header">
      <view class="picker-box mr-2" @click="openGain">
        <text class="">增益:{{ gainName }}</text>
        <wd-icon custom-style="margin-left:-2px;" name="caret-down-small" size="22px"></wd-icon>
      </view>
      <view class="picker-box mr-2" @click="openSpeed">
        <text class="">走速:{{ speedName }}</text>
        <wd-icon custom-style="margin-left:-2px;" name="caret-down-small" size="22px"></wd-icon>
      </view>
    </view>
  </view>
</template>
<script lang="js" setup>
import { gainGroup, speedGroup } from '@/utils/params'
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {
        gain: null,
        speed: null,
      }
    },
  },
})

const gainName = ref(null)
const speedName = ref(null)
watch(
  () => [props.params.gain, props.params.speed],
  ([val, val2]) => {
    gainName.value = gainGroup.find((o) => o.id === val).name
    speedName.value = speedGroup.find((o) => o.id === val2).name
  },
)
onShow(() => {
  gainName.value = gainGroup.find((o) => o.id === props.params.gain).name
  speedName.value = speedGroup.find((o) => o.id === props.params.speed).name
})

const emits = defineEmits(['gainChange', 'speedChange'])
// 打开增益
const openGain = () => {
  emits('gainChange', true)
}

// 打开走速
const openSpeed = () => {
  emits('speedChange', true)
}
</script>
<style lang="scss" scoped>
.waveform {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #eef5fd 0%, #e0edf7 100%);
  border-radius: 20rpx 20rpx 0 0;
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70rpx;
    padding: 0 24rpx;
    .picker-box {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #666666;
    }
  }
}
</style>
